<template>
	<view class="register">
		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="form1" labelWidth='150rpx'>
			<u-form-item label="昵称" prop="name" borderBottom ref="item1">
				<u--input 
				clearable 
				v-model="userInfo.name" 
				border="surround" 
				placeholder="请输入昵称" 
				></u--input>
			</u-form-item>
			<u-form-item label="邮箱" prop="email" borderBottom ref="item2">
				<u--input
				 clearable 
				 v-model="userInfo.email" 
				 border="surround" 
				 placeholder="请输入邮箱" 
				 ></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom ref="item3">
				<u--input 
				password 
				clearable 
				v-model="userInfo.password" 
				border="surround" 
				placeholder="请输入密码" 
				>
				</u--input>
			</u-form-item>
			<u-form-item label="确认密码" prop="password" borderBottom ref="item4">
				<u--input 
				password 
				clearable 
				v-model="userInfo.password_confirmation"
				border="surround" 
				placeholder="请再次输入密码" 
				>
				</u--input>
			</u-form-item>
		</u--form>
		<view class="register-Btn" @click="registerClick">
			<u-button type="primary" text="注册" size="normal" style="margin-top: 20rpx;" ></u-button>
		</view>
	</view>
</template>

<script>
	import {
		authregister
	} from "../../config/api.js"
	export default {

		data() {
			return {
				// 注册表单用户信息
				userInfo: {
					name: '',
					email: '',
					password: '',
					password_confirmation: ''
				},
				// 校验规则
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					},
					email: {
						type: 'email',
						required: true,
						message: '请填写正确格式的邮箱',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
				
			};
		},
		methods: {
			// 点击注册按钮触发
			async registerClick(){
				this.$refs.form1.validate().then(async(res) => {
					if (this.userInfo.password !== this.userInfo.password_confirmation){
						return uni.$u.toast('确认密码与密码不一致')
					}
					const result = await authregister({...this.userInfo})
					uni.$u.toast('注册成功')
					
					setTimeout(()=>{
						this.$u.route({
							type:"redirect",
							url:"/pages/auth/login",
							params:{email:this.userInfo.email,password:this.userInfo.password}
						})
					},1500)
					
				}).catch(err => {
					// console.log(err)
					// 这里是校验失败的情况,显示校验失败的原因
					// 判断是因为这里捕获的错误有网络请求的错误(类似422那种)和校验错误两种
					// 这里只需要显示校验错误的提示，因为网络请求的在响应拦截已经写了
					if(Array.isArray(err)){
						uni.$u.toast(err[0].message)
					}
				})
			},
		},
		onLoad() {
			// console.log('我是注册页面的onLoad')
		}
	}
</script>

<style lang="scss">
	.register {
		padding: 20rpx;
	}
</style>
